<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul></ul>
<table border="1"></table>
<button onclick="ajaxfun()">点我</button>
<!--原生ajax请求txt文档-->
<script>
  function ajaxfun() {

  // 1.创建ajax对象
  var link=new XMLHttpRequest();
  // 2.建立服务器连接 使用open("发送方式","发送地址","true异步/false同步")方法
  //   link.open("get","哈哈.txt","true");
  //   link.open("get","json.json","true");
    link.open("get","fuza.json","true");
  // 3.发送 使用send()
  link.send();

  // 状态码:status
  // 200表示成功;
  // 404表示页面未找到；

  // 状态值：readyState
  // 0表示请求未初始化；
  // 1表示请求服务器已建立；
  // 2表示请求已接收；
  // 3表示请求处理中
  // 4表示请求已完成，且已就绪

  // 3个事件：
  // 1.onreadystatechange状态值（2,3,4）
  // 2.onload状态值（4）
  // 3.onprogress状态值（3）
  // 4.接收 状态值是4且状态码是200才能得到数据
  // 方式1：
/*  link.onreadystatechange=function (ev) {
    // 判断状态值是否为4状态码是否是200
    if(link.readyState==4&&link.status==200){
      console.log(link.responseText);
    }
  };*/
  // 方式2:
  link.onload=function (ev) {
    if(link.status==200){
      // console.log(link.responseText);
      console.log(JSON.parse(link.responseText));
      // var obj=JSON.parse(link.responseText);
      var arr=JSON.parse(link.responseText);
      // var newhtml="";
      var newhtml="<tr><th>姓名</th><th>年龄</th><th>性别</th><th>体重</th></tr>";
      // for(var i in obj){
        for(var i=0;i<arr.allname.length;i++){
        // newhtml+="<li>"+obj[i]+"</li>";
        newhtml+="<tr><td>"+arr.allname[i].uname+"</td><td>"+arr.allname[i].age+"</td><td>"+arr.allname[i].sex+"</td><td>"+arr.allname[i].weight+"</td></tr>"
      }
      // document.querySelector("ul").innerHTML=newhtml;
      document.querySelector("table").innerHTML=newhtml;
    }
  };
  }

</script>
</body>
</html>
